<!--
 * @Description  : 表格 :
                tableType: 表格配置
                    isIndex: 序号框显隐, isSelection: 选择框显隐,border: border显隐,
                tableHeader: 表格头部设置
                    prop:此列参数名 , lable: 头部单元格名 , width: 单元格宽, type: button / 单元格
                tableData : 表格数据
 * @Author       : zhao
 * @Date         : 2022-06-28 11:16:18
 * @LastEditors  : zhao
 * @LastEditTime : 2023-01-30 16:38:33
-->

<template>
    <div class="table">
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%" stripe :border="tableType.border" @selection-change="handleSelectionChange">
                <!-- 暂无数据 -->
                <template slot="empty">
                    <div class="empty" style="width: 100%">
                        <img src="../../assets/NoData2.jpg" alt="" />
                        <!-- <p>暂无数据</p> -->
                    </div>
                </template>

                <!-- 选择框 -->
                <el-table-column type="selection" width="55" v-if="tableType.isSelection"></el-table-column>
                <!-- 序号 -->
                <el-table-column type="index" label="序号" v-if="tableType.isIndex" width="50"> </el-table-column>

                <template>
                    <el-table-column
                        v-for="(i, index) in tableHeader"
                        :prop="i.prop"
                        :label="i.label"
                        :width="i.width"
                        :key="index + 'table'"
                        header-align="center"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div v-if="i.type === 'button'">
                                <template v-for="(s, buttonIndex) in i.options">
                                    <el-popconfirm
                                        :title="'确定' + s.name + '订单吗？'"
                                        :confirm-button-text="s.name"
                                        cancel-button-text="取消"
                                        icon="el-icon-info"
                                        icon-color="red"
                                        @confirm="deleteRow(s.name, scope.row)"
                                        :key="buttonIndex + 'button1'"
                                        v-if="s.name == '撤销' || s.name == '删除'"
                                    >
                                        <el-button
                                            type="text"
                                            size="small"
                                            slot="reference"
                                            :style="{ color: s.name == '撤销' ? '#e6a23c' : '#f56c6c' }"
                                        >
                                            {{ s.name }}</el-button
                                        >
                                    </el-popconfirm>
                                    <el-button :key="buttonIndex + 'button2'" @click="deleteRow(s.name, scope.row)" type="text" size="small" v-else>
                                        {{ s.name }}
                                    </el-button>
                                </template>
                            </div>
                            <template v-else>
                                <a href="javascript:void(0)" class="ellipsis" :title="scope.row[i.prop]">{{ scope.row[i.prop] }}</a>
                            </template>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            theTableData: [],
        }
    },

    props: {
        tableHeader: Array,
        tableData: Array,
        tableType: {
            type: Object,
            default: () => {
                return {
                    isIndex: true,
                    isSelection: true,
                    border: false,
                }
            },
        },
    },
    watch: {
        tableData(val) {
            // console.log("🚀 ~ file: table.vue ~ line 79 ~ tableData ~ val", val)
            // this.$nextTick(() => { })
        },
    },
    mounted() {},

    methods: {
        deleteRow(name, row) {
            if (name === "打印") this.setPrint()
            if (name === "详情") this.pathDetails(row)
            if (name === "撤销") this.revokeOrder(row)
            if (name === "删除") this.deleteOrder(row)
            if (name === "下载使用申请表") this.BSDownLoadApplicationTable(row)
        },
        //跳转详情页
        pathDetails(row) {
            const router = this.$route.name
            this.$store.commit("table/SET_ROWDATA", row)

            if (router == "BrowseRecord") return this.JumpFileInfoDetails(row)
            this.$router.push("/BorrowFormDetail")
            // this.$router.push("/BorrowFormDetail")
        },
        //打印
        setPrint() {
            // this.$router.push("/BorrowFormDetail")
        },
        //获取选中行
        handleSelectionChange(val) {
            this.$store.state.table.selectData = val
        },
        async JumpFileInfoDetails(val) {
            const { data } = await this.$store.dispatch("ArchiveInfo/getArchive", { Sn: val.sn, PageSize: 10, PageIndex: 1 })
            this.$store.commit("table/SET_ROWDATA", data[0])
            this.$router.push({ path: "/FileInfoDetails" })
        },
        async BSDownLoadApplicationTable(row) {
            if (row.state == "已通过" || row.state == "已完成") {
                const res = await this.$store.dispatch("borrowForm/BSDownLoadApplicationTable", { tableNo: row.tableNo })

                if (res.type === "text/plain") {
                    // 说明是普通对象数据，读取信息
                    const fileReader = new FileReader()
                    fileReader.onloadend = () => {
                        try {
                            const jsonData = JSON.parse(fileReader.result) // 说明是普通对象数据，后台转换失败
                            // 后台信息
                            this.$message.error(jsonData.msg)
                        } catch (err) {
                            // 解析成对象失败，说明是正常的文件流
                            // 下载文件
                        }
                    }

                    fileReader.readAsText(res)
                } else {
                    this.$store.commit("table/getFileFlow", res)
                }
            } else {
                this.$message.error("请等待审核完成后下载")
            }
        },
        async revokeOrder(row) {
            if (row.state == "审核中") {
                const { data, code } = await this.$store.dispatch("borrowForm/BSBorrowingFormRevoke", { tableNo: row.tableNo })
                this.$store.state.table.url = "borrowForm/getBorrowingForm"
                if (code == 200) this.$store.dispatch("table/getTableData")
            } else {
                this.$message.error("此状态不可撤销")
            }
        },
        async deleteOrder(row) {
            if (row.state == "已驳回" || row.state == "已撤销" || row.state == "已完成") {
                const { data, code } = await this.$store.dispatch("borrowForm/BSBorrowingFormDelete", { tableNo: row.tableNo })
                this.$store.state.table.url = "borrowForm/getBorrowingForm"
                if (code == 200) this.$store.dispatch("table/getTableData")
            } else {
                this.$message.error("此状态不可删除")
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.el-button {
    padding-left: 5px;
}
</style>
